<template>
<!--  <div>-->
<!--    <a href="https://vitejs.dev" target="_blank">-->
<!--      <img src="/vite.svg" class="logo" alt="Vite logo"/>-->
<!--    </a>-->
<!--    <a href="https://vuejs.org/" target="_blank">-->
<!--      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo"/>-->
<!--    </a>-->
<!--  </div>-->
<!--  <HelloWorld msg="Vite + Vue"/>-->

<div>
  <div class="container" style="padding-top: 2vh;padding-bottom: 4vh">
    <router-view v-slot="{ Component }">
      <transition>
        <keep-alive>
          <component :is="Component"/>
        </keep-alive>
      </transition>
    </router-view>
  </div>
  <FootNav v-if="$route.path==='/user'||$route.path==='/'||$route.name==='explore'"/>
</div>
</template>

<script setup>
import FootNav from "@/components/FootNav.vue";
</script>

<style scoped>
.container{
  width: 100%;
  height: 100%;
}
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.1s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
